{% extends 'layout_user.html' %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <button class="btn btn-add btn-success">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                每日签到
            </button>
            <button class="btn btn-download btn-success">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                导出数据
            </button>

            <div style="float: right;width: 300px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="关键字"
                               value="{{ search_data }}">
                        <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                      </span>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                签到记录
            </div>

            <!-- Table -->
            <table class="table table-hover table-bordered">
                <thead>
                <tr>
                    <th>签到时间</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>所属部门</th>
                    <th>IP地址</th>
                    <th>是否人脸</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.signin_time }}</th>
                        <td>{{ obj.user_info.sid }}</td>
                        <td>{{ obj.user_info.name }}</td>
                        <td>{{ obj.user_info.get_gender_display }}</td>
                        <td>{{ obj.user_info.depart.title }}</td>
                        <td>{{ obj.ip }}</td>
                        <td>{{ obj.get_is_face_display }}</td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>

        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>

    <!-- （对话框） -->

    <div class="modal fade" id="recordModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">人脸识别验证</h4>
                </div>
                <div class="modal-body">
                    <p>是否进行人脸识别的验证&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnConfirmFace" class="btn btn-primary" data-dismiss="modal">确定</button>
                    <button type="button" id="btnSkip" class="btn btn-default" data-dismiss="modal">跳过</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 导出数据（对话框） -->

    <div class="modal fade" id="recordDown" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">请输入导出数据的范围：</h4>
                </div>
                <form method="get" action="/record/download/excel/">
                    <div class="modal-body">
                        <input type="number" name="time" class="form-control" placeholder="天数">
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">确定</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script type="text/javascript">
        $(function () {
            // 当页面的框架加载完成之后，自动就执行。
            bindBtnDownEvent();
            bindBtnAddEvent();
            bindBtnSkip();
            btnConfirmFace();
        })

        function bindBtnAddEvent() {
            $(".btn-add").click(function () {
                // 显示对话框
                $("#recordModal").modal('show');
            });
        }

        function bindBtnDownEvent() {
            $(".btn-download").click(function () {
                $("#recordDown").modal('show');
            });
        }

        function bindBtnSkip() {
            $("#btnSkip").click(function () {
                $.ajax({
                    url: "/record/add/day/",  //
                    type: "post",
                    data: {
                        type: "noFace"
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            location.reload();
                            // 签到成功
                            alert("签到成功");
                        } else {
                            // 签到失败
                            alert(res.error);
                        }
                    }
                })
            });
        }

        function btnConfirmFace() {
            $("#btnConfirmFace").click(function () {
                $.ajax({
                    url: "/record/add/day/",  //    => /record/delete/?uid=123
                    type: "post",
                    data: {
                        type: "Face"
                    },
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            location.reload();
                            // 签到成功
                            alert("签到成功");
                        } else {
                            // 签到失败
                            alert(res.error);
                        }
                    }
                })
            });
        }

    </script>
{% endblock %}